<template>
  <div class="lay-main">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          :collapse="isCollapse"
        >
          <div v-for="(item, index) in dealmenuList" :key="index">
            <el-submenu
              :index="item.path"
              v-if="item.child && item.child.length > 0"
            >
              <template slot="title">
                <i :class="['iconfont', item.icon]"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <el-menu-item
                @click="handelMenu(chid)"
                :index="chid.path"
                v-for="(chid, childIndex) in item?.child"
                :key="childIndex"
                >{{ chid.name }}</el-menu-item
              >
            </el-submenu>
            <el-menu-item :index="item.path" v-else @click="handelMenu(item)">
              <i :class="['iconfont', item.icon]"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- <div class="topTab">
          <el-tabs
            v-model="tabsValue"
            closable
            @tab-click="tabClick"
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="(item, index) in tabList"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              {{ item.content }}
            </el-tab-pane>
          </el-tabs>
        </div> -->
        <div class="main-content">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      isCollapse: false,
      menuList: [
        {
          path: "/activity",
          name: "活动管理",
          icon: "icon-a-Group21",
          child: [],
        },
        {
          path: "/test",
          name: "测试",
          icon: "icon-a-Group21",
          child: [],
        },

        // {
        //   path: "/talent",
        //   name: "达人列表",
        //   icon: "icon-a-Group22",
        // },
        // {
        //   path: "/talentAudit",
        //   name: "达人审核",
        //   icon: "icon-a-Group22",
        // },
        {
          path: "/talent",
          name: "达人库",
          icon: "icon-a-Group22",
          child: [
            {
              path: "/talent",
              name: "达人列表",
              icon: "icon-a-Group22",
            },
            {
              path: "/talentAudit",
              name: "达人审核",
              icon: "icon-a-Group22",
            },
          ],
        },
        {
          path: "/club",
          name: "社团管理",
          icon: "icon-tuandui",
          // child: [
          //   {
          //     path: "/club",
          //     name: "社团列表",
          //     icon: "",
          //   },
          //   {
          //     path: "/clubAudit",
          //     name: "加入社团审核",
          //     icon: "",
          //   },
          // ],
        },
        {
          path: "/miniApply",
          name: "微项目申请管理",
          icon: "icon-a-Group24",
          child: [],
        },
        {
          path: "/wish",
          name: "小小心愿",
          icon: "icon-xinyuandan",
          child: [],
        },
        {
          path: "/business",
          name: "商圈联盟",
          icon: "icon-a-Group26",
          child: [],
        },
        {
          path: "/neighbourhood",
          name: window.location.origin.includes("https://xfl.judaiot.com:30110")
            ? "星友圈"
            : "邻里圈",
          icon: "icon-CombinedShape",
          child: [],
        },

        // {
        //   path: "/scoreRanking",
        //   name: "积分排名",
        //   icon: "icon-a-Group20",
        // },
        // {
        //   path: "/scoreMoney",
        //   name: "积分流水",
        //   icon: "icon-a-Group20",
        // },
        // {
        //   path: "/scoreConfig",
        //   name: "积分配置",
        //   icon: "icon-a-Group20",
        // },
        {
          path: "/scoreRanking",
          name: "积分管理",
          icon: "icon-a-Group20",
          child: [
            {
              path: "/scoreRanking",
              name: "积分排名",
              icon: "",
            },
            {
              path: "/scoreMoney",
              name: "积分流水",
              icon: "",
            },
            {
              path: "/scoreConfig",
              name: "积分配置",
              icon: "",
            },
            {
              path: "/peopleArchive",
              name: "居民积分管理",
              icon: "icon-dangan1",
              child: [],
            },
          ],
        },
        {
          path: "/venue",
          name: "场馆预约",
          icon: "icon-changguangaikuang",
          child: [],
        },
      ],
      dealmenuList: [
        {
          path: "/activity",
          name: "活动管理",
          icon: "icon-a-Group21",
          child: [],
        },
      ],
      tabsValue: "",
      tabList: [],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.filterRouter();
    this.tabsValue = this.$route.path;
    this.tabList = [
      {
        title: this.$route.meta.title,
        name: this.$route.path,
        content: "",
      },
    ];
    // console.log(this.$route.path, ">>>>>>>>>>");
  },

  methods: {
    //监听路由变化更改左侧菜单栏
    filterRouter() {
      // console.log("路由变化了");
      // console.log(this.$route.path, ">>>>>>>>>>");

      switch (this.$route.path) {
        case "/main":
          this.dealmenuList = this.menuList;
          break;
        case "/activity":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/activity") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/talent":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/talent") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/talentAudit") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/talentAudit":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/talent") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/talentAudit") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/club":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/club") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/miniApply":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/miniApply") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/wish":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/wish") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/business":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/business") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/neighbourhood":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/neighbourhood") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/scoreRanking":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/scoreRanking") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/scoreMoney") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/scoreConfig") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/peopleArchive") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/scoreMoney":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/scoreRanking") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/scoreMoney") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/scoreConfig") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/peopleArchive") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/scoreConfig":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/scoreRanking") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/scoreMoney") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/scoreConfig") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/peopleArchive") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/venue":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/venue") {
              this.dealmenuList.push(item);
            }
          });
          break;
        case "/peopleArchive":
          this.dealmenuList = [];
          this.menuList.filter((item) => {
            if (item.path == "/scoreRanking") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/scoreMoney") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/scoreConfig") {
              this.dealmenuList.push(item);
            }
            if (item.path == "/peopleArchive") {
              this.dealmenuList.push(item);
            }
          });
          break;

        default:
          break;
      }
    },
    handleSelect(key, keyPath) {
      this.$router.push(key);
    },
    // 面包屑里增加tab
    handelMenu(val) {
      const result = this.tabList.findIndex((item) => item.name == val.path);
      if (result == -1) {
        this.tabList.push({
          title: val.name,
          name: val.path,
          content: "",
        });
      }
      this.tabsValue = val.path;
    },

    // tabClick(tab) {
    //   this.$router.push(this.tabsValue);
    // },
    // removeTab(targetName) {
    //   let tabs = this.tabList;
    //   let activeName = this.tabsValue;
    //   if (activeName === targetName) {
    //     tabs.forEach((tab, index) => {
    //       if (tab.name === targetName) {
    //         let nextTab = tabs[index + 1] || tabs[index - 1];
    //         if (nextTab) {
    //           activeName = nextTab.name;
    //         }
    //       }
    //     });
    //   }
    //   this.tabsValue = activeName;
    //   this.tabList = tabs.filter((tab) => tab.name !== targetName);
    //   this.$router.push(this.tabsValue);
    // },
  },

  watch: {
    //监听，当页面路由发生变化的时候，就执行菜单处理方法
    "$route.path": "filterRouter",
  },
};
</script>
<style lang="scss" scoped>
.lay-main {
  height: 100vh;
  background: #eef0f3;

  /deep/.el-container {
    height: 100%;
    display: flex;
    aside {
      background: #fff;
      .iconfont {
        margin-right: 8px;
      }
      .el-submenu__title {
        height: 50px;
        line-height: 50px;
      }
      .el-menu-item {
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
      }
      .el-menu-item.is-active {
        color: #1890ff;
        background-color: #e6f7ff !important;
      }
      .el-menu-item:focus,
      .el-menu-item:hover {
        color: #1890ff;
        background-color: rgba(0, 0, 0, 0);
        .iconfont {
          color: #1890ff;
        }
      }
      .el-submenu__title:hover {
        color: #1890ff;
        background-color: rgba(0, 0, 0, 0);
        .el-submenu__icon-arrow {
          color: #1890ff;
        }
        .iconfont {
          color: #1890ff;
        }
      }
    }

    .el-main {
      width: 100%;
      flex-grow: 1;
      padding: 0;
      .topTab {
        background: #fff;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        padding: 0 20px;
        .el-tabs {
          padding-top: 4px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 52px;
          .el-tabs__nav-wrap::after {
            background-color: rgba(0, 0, 0, 0);
          }
        }
      }

      .main-content {
        padding: 12px 12px 0;
      }
    }
  }
}
</style>
<style>
.el-aside {
  padding: 16px 0;
  flex-basis: 200px;
}
</style>
